<template>
    <div class="icon-template" @click.prevent="handleClick">
        <a-tooltip>
            <template v-slot:title>
                {{ tip }}
            </template>
            <a-button :type="checked ? 'primary' : 'default'" shape="circle">
                <template v-slot:icon>
                    <component :is="iconName" />
                </template>
            </a-button>
        </a-tooltip>
    </div>
</template>

<script>
import { defineComponent } from 'vue'
import { BoldOutlined, ItalicOutlined, UnderlineOutlined } from '@ant-design/icons-vue'
export default defineComponent({
    components: {
        BoldOutlined,
        ItalicOutlined,
        UnderlineOutlined
    },
    props: {
        iconName: {
            type: String,
            required: true
        },
        checked: {
            type: Boolean,
            default: false
        },
        tip: {
            type: String
        }
    },
    emits: ['change'],
    setup (props, context) {
        const handleClick = () => {
            context.emit('change', !props.checked)
        }
        return {
            handleClick
        }
    }
})
</script>

<style></style>
